<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 简单的值可以通过事件直接改变的 -->
        <h2>当前的n值:{{n}}</h2>
        <button @click="n++">点我n+1</button>

        <!-- 使用v-show来做条件渲染  -->
        <h1 v-show="false">欢迎你{{name}}</h1>
        <h1 v-show="n === 1">欢迎你{{name}}</h1>

        <!-- 使用v-if做条件渲染 -->
        <h1 v-if="false">欢迎你{{name}}</h1>
        <h1 v-if="n === 1">欢迎你{{name}}</h1>

        <h1 v-if="n === 1">java</h1>
        <h1 v-else-if="n === 2">mysql</h1>
        <h1 v-else-if="n === 3">js</h1>
        <h1 v-else>哈哈</h1>


        <h1 v-show="n === 1">欢迎你{{name}}</h1>
        <h1 v-show="n === 2">欢迎你{{name}}</h1>
        <h1 v-show="n === 3">欢迎你{{name}}</h1>
        <h1 v-show="n === 4">欢迎你{{name}}</h1>


        <!-- <div v-show="n === 1">
            <h3>你好</h3>
            <h3>云南</h3>
            <h3>昆明</h3>
        </div> -->

        <!-- 当多个标签需要看做整体时 又不想添加多余结构可以使用v-if+template标签 -->
        <template v-if="n === 1">
            <h3>你好</h3>
            <h3>云南</h3>
            <h3>昆明</h3>
        </template>

    </div>

</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                name: '张三',
                n: 0
            }
        },


    })

</script>